<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网址速藏 - 您的专属网址收藏夹</title>
    <link rel="stylesheet" href="/web/css/common.css">
    <link rel="stylesheet" href="/web/css/login.css">
    <link rel="stylesheet" href="/web/css/home.css">
    <link rel="stylesheet" href="/web/css/components.css">
    <!-- Vue.js CDN -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <!-- Element Plus UI框架 -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
    <!-- 图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<div id="app">
    <!-- 登录页面 -->
    <div v-if="currentPage === 'login'" class="login-container">
        <div class="login-background">
            <div class="floating-shapes">
                <div class="shape shape-1">🌟</div>
                <div class="shape shape-2">🎈</div>
                <div class="shape shape-3">🌈</div>
                <div class="shape shape-4">🦄</div>
                <div class="shape shape-5">🎨</div>
                <div class="shape shape-6">🌸</div>
            </div>
        </div>

        <div class="login-card">
            <div class="login-header">
                <div class="logo">
                    <i class="fas fa-bookmark"></i>
                    <h1>网址速藏</h1>
                </div>
                <p class="subtitle">您的专属网址收藏夹 ✨</p>
            </div>

            <form @submit.prevent="handleLogin" class="login-form">
                <div class="form-group">
                    <label for="username">
                        <i class="fas fa-user"></i>
                        用户名
                    </label>
                    <input
                            type="text"
                            id="username"
                            v-model="loginForm.username"
                            placeholder="请输入用户名"
                            required
                    >
                </div>

                <div class="form-group">
                    <label for="password">
                        <i class="fas fa-lock"></i>
                        密码
                    </label>
                    <input
                            type="password"
                            id="password"
                            v-model="loginForm.password"
                            placeholder="请输入密码"
                            required
                    >
                </div>

                <button type="submit" class="login-btn" :disabled="isLoading">
                    <i v-if="isLoading" class="fas fa-spinner fa-spin"></i>
                    <span v-else>🚀 登录</span>
                </button>
            </form>

            <div class="login-footer">
                <p>还没有账号？ <a href="#" @click="goToRegister">立即注册 🎉</a></p>
            </div>
        </div>
    </div>

    <!-- 注册页面 -->
    <div v-if="currentPage === 'register'" class="login-container">
        <div class="login-background">
            <div class="floating-shapes">
                <div class="shape shape-1">🌟</div>
                <div class="shape shape-2">🎈</div>
                <div class="shape shape-3">🌈</div>
                <div class="shape shape-4">🦄</div>
                <div class="shape shape-5">🎨</div>
                <div class="shape shape-6">🌸</div>
            </div>
        </div>

        <div class="login-card">
            <div class="login-header">
                <div class="logo">
                    <i class="fas fa-user-plus"></i>
                    <h1>加入我们</h1>
                </div>
                <p class="subtitle">开始您的收藏之旅 🌟</p>
            </div>

            <form @submit.prevent="handleRegister" class="login-form">
                <div class="form-group">
                    <label for="reg-username">
                        <i class="fas fa-user"></i>
                        用户名
                    </label>
                    <input
                            type="text"
                            id="reg-username"
                            v-model="registerForm.username"
                            placeholder="请输入用户名"
                            required
                    >
                </div>

                <div class="form-group">
                    <label for="reg-email">
                        <i class="fas fa-envelope"></i>
                        邮箱
                    </label>
                    <input
                            type="email"
                            id="reg-email"
                            v-model="registerForm.email"
                            placeholder="请输入邮箱地址"
                            required
                    >
                </div>

                <div class="form-group">
                    <label for="reg-password">
                        <i class="fas fa-lock"></i>
                        密码
                    </label>
                    <input
                            type="password"
                            id="reg-password"
                            v-model="registerForm.password"
                            placeholder="请输入密码"
                            required
                    >
                </div>

                <button type="submit" class="login-btn" :disabled="isLoading">
                    <i v-if="isLoading" class="fas fa-spinner fa-spin"></i>
                    <span v-else>🎉 注册</span>
                </button>
            </form>

            <div class="login-footer">
                <p>已有账号？ <a href="#" @click="goToLogin">立即登录 🚀</a></p>
            </div>
        </div>
    </div>

    <!-- 左侧隐藏式标签侧边栏 -->
    <aside v-if="currentPage === 'home'" class="hidden-tab-sidebar">
        <!-- 品牌标签 -->
        <div class="sidebar-tab brand-tab"
             @mouseenter="hoveredTab = 'brand'"
             @mouseleave="hoveredTab = null">
            <div class="tab-indicator brand-indicator"></div>
            <div class="tab-content brand-content" :class="{ 'show': hoveredTab === 'brand' }">
                <div class="content-header">
                    <div class="content-icon">🌟</div>
                    <div class="brand-info">
                        <h3>网址速藏</h3>
                        <p>{{ user.username }} 🎈</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 导航标签 -->
        <div class="sidebar-tab nav-tab"
             :class="{ 'active': activeTab === 'home' }"
             @mouseenter="hoveredTab = 'home'"
             @mouseleave="hoveredTab = null"
             @click="activeTab = 'home'">
            <div class="tab-indicator home-indicator" :class="{ 'active': activeTab === 'home' }"></div>
            <div class="tab-content home-content" :class="{ 'show': hoveredTab === 'home' }">
                <div class="content-header">
                    <div class="content-icon">🏠</div>
                    <div class="content-info">
                        <span class="tab-text">首页</span>
                        <p class="tab-desc">查看分类和收藏</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="sidebar-tab nav-tab"
             :class="{ 'active': activeTab === 'categories' }"
             @mouseenter="hoveredTab = 'categories'"
             @mouseleave="hoveredTab = null"
             @click="activeTab = 'categories'">
            <div class="tab-indicator categories-indicator" :class="{ 'active': activeTab === 'categories' }"></div>
            <div class="tab-content categories-content" :class="{ 'show': hoveredTab === 'categories' }">
                <div class="content-header">
                    <div class="content-icon">📁</div>
                    <div class="content-info">
                        <span class="tab-text">分类管理</span>
                        <p class="tab-desc">创建和管理分类</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="sidebar-tab nav-tab"
             :class="{ 'active': activeTab === 'bookmarks' }"
             @mouseenter="hoveredTab = 'bookmarks'"
             @mouseleave="hoveredTab = null"
             @click="activeTab = 'bookmarks'">
            <div class="tab-indicator bookmarks-indicator" :class="{ 'active': activeTab === 'bookmarks' }"></div>
            <div class="tab-content bookmarks-content" :class="{ 'show': hoveredTab === 'bookmarks' }">
                <div class="content-header">
                    <div class="content-icon">⭐</div>
                    <div class="content-info">
                        <span class="tab-text">收藏管理</span>
                        <p class="tab-desc">管理网址收藏</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="sidebar-tab nav-tab"
             :class="{ 'active': activeTab === 'profile' }"
             @mouseenter="hoveredTab = 'profile'"
             @mouseleave="hoveredTab = null"
             @click="activeTab = 'profile'">
            <div class="tab-indicator profile-indicator" :class="{ 'active': activeTab === 'profile' }"></div>
            <div class="tab-content profile-content" :class="{ 'show': hoveredTab === 'profile' }">
                <div class="content-header">
                    <div class="content-icon">👤</div>
                    <div class="content-info">
                        <span class="tab-text">个人信息</span>
                        <p class="tab-desc">管理个人资料</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 退出标签 -->
        <div class="sidebar-tab logout-tab"
             @mouseenter="hoveredTab = 'logout'"
             @mouseleave="hoveredTab = null"
             @click="handleLogout">
            <div class="tab-indicator logout-indicator"></div>
            <div class="tab-content logout-content" :class="{ 'show': hoveredTab === 'logout' }">
                <div class="content-header">
                    <div class="content-icon">🚪</div>
                    <div class="content-info">
                        <span class="tab-text">退出登录</span>
                        <p class="tab-desc">安全退出系统</p>
                    </div>
                </div>
            </div>
        </div>
    </aside>

    <!-- 主页面 -->
    <div v-if="currentPage === 'home'" class="home-container">

        <!-- 主内容区 -->
        <main class="main-content">
            <!-- 首页内容 -->
            <div v-if="activeTab === 'home'" class="home-content">
                <div class="hero-section">
                    <h2>🌟 欢迎回来！</h2>
                    <p>管理您的网址收藏，让上网更高效 ✨</p>
                </div>

                <!-- 分类树展示 -->
                <div class="categories-tree-section">
                    <div class="tree-header">
                        <h3>📁 分类结构</h3>
                        <div class="tree-controls" v-if="categoryTree.length > 0">
                            <button @click="expandAllCategories()" class="tree-control-btn">
                                <i class="fas fa-expand-alt"></i> 展开全部
                            </button>
                            <button @click="collapseAllCategories()" class="tree-control-btn">
                                <i class="fas fa-compress-alt"></i> 折叠全部
                            </button>
                        </div>
                    </div>
                    <div v-if="categoryTree.length > 0" class="category-tree-container">
                        <div v-for="category in categoryTree" :key="category.id" class="category-tree-item">
                            <!-- 顶级分类 -->
                            <div class="category-node root-category">
                                <div class="category-main" @click="viewCategoryBookmarks(category)">
                                    <div class="category-icon">📁</div>
                                    <div class="category-info">
                                        <h4 class="category-name">{{ category.name }}</h4>
                                        <span class="category-path">{{ category.path }}</span>
                                        <span class="bookmark-count">{{ getCategoryBookmarkCount(category.id) }} 个收藏</span>
                                    </div>
                                </div>
                                <div class="category-toggle"
                                     v-if="category.children && category.children.length > 0"
                                     @click.stop="toggleRootCategory(category.id)">
                                    <i class="fas fa-chevron-down"
                                       :class="{ 'rotated': rootCategoriesExpanded.includes(category.id) }"></i>
                                </div>
                            </div>

                            <!-- 子分类 -->
                            <div v-if="category.children && category.children.length > 0"
                                 class="subcategories"
                                 :class="{ 'expanded': rootCategoriesExpanded.includes(category.id) }">
                                <div class="tree-line"></div>
                                <div class="subcategory-list">
                                    <div v-for="subcategory in category.children" :key="subcategory.id"
                                         class="category-tree-item sub-item">
                                        <!-- 二级分类 -->
                                        <div class="category-node sub-category">
                                            <div class="category-main" @click="viewCategoryBookmarks(subcategory)">
                                                <div class="category-connector"></div>
                                                <div class="category-icon">📂</div>
                                                <div class="category-info">
                                                    <h5 class="category-name">{{ subcategory.name }}</h5>
                                                    <span class="category-path">{{ subcategory.path }}</span>
                                                    <span class="bookmark-count">{{ getCategoryBookmarkCount(subcategory.id) }} 个收藏</span>
                                                </div>
                                            </div>
                                            <div class="category-toggle"
                                                 v-if="subcategory.children && subcategory.children.length > 0"
                                                 @click.stop="toggleCategory(subcategory.id)">
                                                <i class="fas fa-chevron-down"
                                                   :class="{ 'rotated': expandedCategories.includes(subcategory.id) }"></i>
                                            </div>
                                        </div>

                                        <!-- 三级分类 -->
                                        <div v-if="subcategory.children && subcategory.children.length > 0"
                                             class="sub-subcategories"
                                             :class="{ 'expanded': expandedCategories.includes(subcategory.id) }">
                                            <div v-for="subSubcategory in subcategory.children" :key="subSubcategory.id"
                                                 class="category-tree-item sub-sub-item">
                                                <!-- 三级分类节点 -->
                                                <div class="category-node sub-sub-category">
                                                    <div class="category-main" @click="viewCategoryBookmarks(subSubcategory)">
                                                        <div class="category-connector small"></div>
                                                        <div class="category-icon">📄</div>
                                                        <div class="category-info">
                                                            <h6 class="category-name">{{ subSubcategory.name }}</h6>
                                                            <span class="category-path">{{ subSubcategory.path }}</span>
                                                            <span class="bookmark-count">{{ getCategoryBookmarkCount(subSubcategory.id) }} 个收藏</span>
                                                        </div>
                                                    </div>
                                                    <div class="category-toggle"
                                                         v-if="subSubcategory.children && subSubcategory.children.length > 0"
                                                         @click.stop="toggleCategory(subSubcategory.id)">
                                                        <i class="fas fa-chevron-down"
                                                           :class="{ 'rotated': expandedCategories.includes(subSubcategory.id) }"></i>
                                                    </div>
                                                </div>

                                                <!-- 四级分类 -->
                                                <div v-if="subSubcategory.children && subSubcategory.children.length > 0"
                                                     class="sub-sub-subcategories"
                                                     :class="{ 'expanded': expandedCategories.includes(subSubcategory.id) }">
                                                    <div v-for="subSubSubcategory in subSubcategory.children" :key="subSubSubcategory.id"
                                                         class="category-node sub-sub-sub-category"
                                                         @click="viewCategoryBookmarks(subSubSubcategory)">
                                                        <div class="category-connector tiny"></div>
                                                        <div class="category-icon">📋</div>
                                                        <div class="category-info">
                                                            <span class="category-name">{{ subSubSubcategory.name }}</span>
                                                            <span class="category-path">{{ subSubSubcategory.path }}</span>
                                                            <span class="bookmark-count">{{ getCategoryBookmarkCount(subSubSubcategory.id) }} 个收藏</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 空状态 -->
                    <div v-else class="empty-categories">
                        <i class="fas fa-folder-open"></i>
                        <h3>还没有分类</h3>
                        <p>创建您的第一个分类来开始整理收藏</p>
                        <button @click="activeTab = 'categories'" class="create-category-btn">
                            <i class="fas fa-plus"></i> 创建分类
                        </button>
                    </div>
                </div>
            </div>

            <!-- 分类收藏页面 -->
            <div v-if="activeTab === 'category-bookmarks'" class="category-bookmarks-content">
                <div class="page-header">
                    <div class="header-left">
                        <div class="breadcrumb">
                            <span class="breadcrumb-text">正在查看</span>
                            <span class="breadcrumb-path">"{{ currentCategoryPath }}"</span>
                            <span class="breadcrumb-text">分类下的收藏</span>
                        </div>
                    </div>
                    <div class="header-actions">
                        <button @click="openCreateBookmarkModal()" class="create-bookmark-btn">
                            <i class="fas fa-plus"></i> 添加收藏
                        </button>
                        <button @click="activeTab = 'home'" class="back-btn">
                            <i class="fas fa-arrow-left"></i> 返回首页
                        </button>
                    </div>
                </div>

                <!-- 分类收藏列表 -->
                <div v-if="categoryBookmarks.length > 0" class="bookmarks-grid">
                    <div v-for="bookmark in categoryBookmarks" :key="bookmark.id" class="bookmark-card">
                        <div class="bookmark-header">
                            <h4>{{ bookmark.title }}</h4>
                            <div class="bookmark-actions">
                                <button @click="visitBookmark(bookmark)" class="visit-btn" title="访问网站">
                                    <i class="fas fa-external-link-alt"></i>
                                </button>
                            </div>
                        </div>
                        <p class="bookmark-description">{{ bookmark.description }}</p>
                        <div class="bookmark-meta">
                            <span class="bookmark-url">{{ bookmark.url }}</span>
                            <span class="bookmark-visits">{{ bookmark.visit_count || 0 }} 次访问</span>
                        </div>
                    </div>
                </div>

                <!-- 空状态 -->
                <div v-else class="empty-state">
                    <i class="fas fa-bookmark"></i>
                    <h3>该分类下暂无收藏</h3>
                    <p>点击上方的"添加收藏"按钮为该分类添加收藏</p>
                    <button @click="openCreateBookmarkModal()" class="create-btn">
                        <i class="fas fa-plus"></i> 添加收藏
                    </button>
                </div>
            </div>

            <!-- 分类管理页面 -->
            <div v-if="activeTab === 'categories'" class="categories-page">
                <div class="page-header">
                    <h2>📁 分类管理</h2>
                    <button @click="showCreateCategoryModal = true" class="create-btn">
                        <i class="fas fa-plus"></i> 创建分类
                    </button>
                </div>



                <!-- 分类树形列表 -->
                <div v-if="categoryTree.length > 0" class="category-management-tree">
                    <div v-for="category in categoryTree" :key="category.id" class="category-tree-item">
                        <!-- 顶级分类 -->
                        <div class="category-item root-category"
                             :class="{ 'has-children': category.children && category.children.length > 0, 'expanded': expandedCategories.includes(category.id) }"
                             @click="handleCategoryClick(category)">
                            <div class="category-item-header">
                                <div class="category-item-main">
                                    <div class="category-toggle-icon" v-if="category.children && category.children.length > 0">
                                        <i :class="expandedCategories.includes(category.id) ? 'fas fa-chevron-down' : 'fas fa-chevron-right'"></i>
                                    </div>
                                    <div class="category-icon-wrapper">
                                        <i :class="category.children && category.children.length > 0 ? 'fas fa-folder' : 'fas fa-folder-open'" class="category-icon"></i>
                                    </div>
                                    <div class="category-info">
                                        <h4 class="category-name">{{ category.name }}</h4>
                                        <span class="category-path" v-if="category.path">{{ category.path }}</span>
                                        <div class="category-stats">
                                            <span class="stat-item">📊 {{ getCategoryBookmarkCount(category.id) }}</span>
                                            <span class="stat-item" v-if="category.children && category.children.length > 0">📁 {{ category.children.length }}</span>
                                            <span class="stat-item">📅 {{ formatDate(category.created_at) }}</span>
                                        </div>
                                    </div>
                                </div>
                                <!--                                    <div class="category-item-actions" @click.stop>-->
                                <!--                                        <button @click.stop="$emit('edit-category', category)" class="action-btn edit-btn" title="编辑分类">-->
                                <!--                                            <i class="fas fa-edit"></i>-->
                                <!--                                        </button>-->
                                <!--                                        <button @click.stop="$emit('delete-category', category.id)" class="action-btn delete-btn" title="删除分类">-->
                                <!--                                            <i class="fas fa-trash"></i>-->
                                <!--                                        </button>-->
                                <!--                                    </div>-->
                                <div class="category-item-actions" @click.stop>
                                    <button @click.stop="editCategory && editCategory(category)" class="action-btn edit-btn" title="编辑分类">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <button @click.stop="deleteCategory && deleteCategory(category.id)" class="action-btn delete-btn" title="删除分类">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </div>
                            </div>
                        </div>



                        <!-- 递归渲染子分类 -->
                        <category-management-node
                                v-if="category.children && category.children.length > 0"
                                v-for="subcategory in category.children"
                                :key="subcategory.id"
                                :category="subcategory"
                                :level="1"
                                :expanded-categories="expandedCategories"
                                :show-expanded="expandedCategories.includes(category.id)"
                                @handle-category-click="handleCategoryClick"
                                @edit-category="editCategory"
                                @delete-category="deleteCategory"
                                @get-category-bookmark-count="getCategoryBookmarkCount"
                                @format-date="formatDate">
                        </category-management-node>
                    </div>
                </div>

                <!-- 空状态 -->
                <div v-else class="empty-state">
                    <i class="fas fa-folder-open"></i>
                    <h3>还没有分类</h3>
                    <p>点击上方的"创建分类"按钮来添加您的第一个分类</p>
                </div>
            </div>

            <!-- 个人信息管理页面 -->
            <div v-if="activeTab === 'profile'" class="profile-content">
                <div class="page-header">
                    <h2>👤 个人信息</h2>
                    <button @click="showEditProfileModal = true" class="create-btn">
                        <i class="fas fa-edit"></i> 编辑信息
                    </button>
                </div>

                <!-- 个人信息卡片 -->
                <div class="profile-card">
                    <div class="profile-avatar">
                        <div class="avatar-circle">
                            <span class="avatar-text">{{ user.username ? user.username.charAt(0).toUpperCase() : 'U' }}</span>
                        </div>
                    </div>
                    <div class="profile-info">
                        <h3>{{ user.username || '未设置' }}</h3>
                        <p class="profile-email">{{ user.email || '未设置邮箱' }}</p>
                        <div class="profile-stats">
                            <div class="stat-item">
                                <span class="stat-number">{{ totalCategoriesCount }}</span>
                                <span class="stat-label">分类数量</span>
                            </div>
                            <div class="stat-item">
                                <span class="stat-number">{{ bookmarks.length }}</span>
                                <span class="stat-label">收藏数量</span>
                            </div>
                            <div class="stat-item">
                                <span class="stat-number">{{ getTotalVisits() }}</span>
                                <span class="stat-label">总访问量</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 最近活动 -->
                <div class="recent-activity">
                    <h3>📊 最近活动</h3>
                    <div class="activity-list">
                        <div v-for="activity in recentActivities" :key="activity.id" class="activity-item">
                            <div class="activity-icon">{{ activity.icon }}</div>
                            <div class="activity-content">
                                <p class="activity-text">{{ activity.text }}</p>
                                <span class="activity-time">{{ formatDate(activity.time) }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 收藏管理页面 -->
            <div v-if="activeTab === 'bookmarks'" class="bookmarks-content">
                <div class="page-header">
                    <h2>⭐ 收藏管理</h2>
                    <div class="header-actions">
                        <!-- 批量操作按钮组 -->
                        <div v-if="!batchMode" class="action-group">
                            <button @click="showCreateBookmarkModal = true" class="create-btn">
                                <i class="fas fa-plus"></i> 添加收藏
                            </button>
                            <button @click="enterBatchMode" class="batch-btn" title="批量操作">
                                <i class="fas fa-tasks"></i> 批量操作
                            </button>
                        </div>

                        <!-- 批量操作模式下的按钮组 -->
                        <div v-else class="batch-action-group">
                            <span class="batch-status">已选择 {{ selectedBookmarks.length }} 个收藏</span>
                            <button @click="selectAllBookmarks" class="batch-select-btn"
                                    :disabled="selectedBookmarks.length === filteredBookmarks.length">
                                <i class="fas fa-check-square"></i> 全选
                            </button>
                            <button @click="clearSelection" class="batch-clear-btn"
                                    :disabled="selectedBookmarks.length === 0">
                                <i class="fas fa-times"></i> 清空
                            </button>
                            <button @click="showBatchMoveModal = true" class="batch-move-btn"
                                    :disabled="selectedBookmarks.length === 0">
                                <i class="fas fa-folder"></i> 移动
                            </button>
                            <button @click="batchDeleteBookmarks" class="batch-delete-btn"
                                    :disabled="selectedBookmarks.length === 0">
                                <i class="fas fa-trash"></i> 删除
                            </button>
                            <button @click="exitBatchMode" class="batch-exit-btn">
                                <i class="fas fa-times"></i> 退出
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 搜索栏 -->
                <div class="search-bar">
                    <input
                            type="text"
                            v-model="searchQuery"
                            placeholder="搜索收藏..."
                            class="search-input"
                            @input="handleSearch"
                    >
                    <tree-select
                            v-model="filterCategory"
                            :options="categoryTree"
                            placeholder="所有分类"
                            :clearable="true"
                            @update:modelValue="handleFilter"
                    ></tree-select>
                </div>

                <!-- 筛选状态提示 -->
                <div v-if="filterCategory || searchQuery" class="filter-status">
                    <div class="filter-info">
                            <span v-if="filterCategory" class="filter-tag">
                                <i class="fas fa-folder"></i>
                                分类：{{ getCategoryName(filterCategory) }}
                                <button @click="filterCategory = ''" class="clear-filter">
                                    <i class="fas fa-times"></i>
                                </button>
                            </span>
                        <span v-if="searchQuery" class="filter-tag">
                                <i class="fas fa-search"></i>
                                搜索：{{ searchQuery }}
                                <button @click="searchQuery = ''" class="clear-filter">
                                    <i class="fas fa-times"></i>
                                </button>
                            </span>
                    </div>
                    <div class="filter-result">
                        找到 {{ filteredBookmarks.length }} 个收藏
                    </div>
                </div>

                <!-- 收藏网格 -->
                <div v-if="filteredBookmarks.length > 0" class="bookmarks-grid">
                    <div
                            v-for="bookmark in filteredBookmarks"
                            :key="bookmark.id"
                            class="bookmark-card"
                            :class="{ 'selected': selectedBookmarks.includes(bookmark.id) }"
                    >
                        <!-- 批量操作复选框 -->
                        <div v-if="batchMode" class="bookmark-checkbox">
                            <input
                                    type="checkbox"
                                    :id="'bookmark-' + bookmark.id"
                                    :value="bookmark.id"
                                    v-model="selectedBookmarks"
                                    class="batch-checkbox"
                            >
                            <label :for="'bookmark-' + bookmark.id" class="checkbox-label"></label>
                        </div>

                        <div class="bookmark-header">
                            <div class="bookmark-favicon">
                                <i class="fas fa-link"></i>
                            </div>
                            <div class="bookmark-info">
                                <h4 class="bookmark-title">{{ bookmark.title }}</h4>
                                <a
                                        :href="bookmark.url"
                                        target="_blank"
                                        class="bookmark-url"
                                        @click="visitBookmark(bookmark)"
                                >
                                    {{ getDomain(bookmark.url) }}
                                </a>
                            </div>
                        </div>

                        <p v-if="bookmark.description" class="bookmark-description">
                            {{ bookmark.description }}
                        </p>

                        <div class="bookmark-meta">
                                <span v-if="bookmark.category_id" class="bookmark-category">
                                    {{ getCategoryName(bookmark.category_id) }}
                                </span>
                            <span v-else class="bookmark-category" style="background: #ddd; color: #666;">
                                    未分类
                                </span>
                            <div class="bookmark-stats">
                                <span><i class="fas fa-eye"></i> {{ bookmark.visit_count || 0 }}</span>
                            </div>
                        </div>

                        <div class="bookmark-actions">
                            <button @click="editBookmark(bookmark)" class="edit-btn" title="编辑">
                                <i class="fas fa-edit"></i>
                            </button>
                            <button @click.stop="deleteBookmark(bookmark.id)" class="delete-btn" title="删除">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 空状态 -->
                <div v-else class="empty-state">
                    <i class="fas fa-bookmark"></i>
                    <h3>{{ searchQuery || filterCategory ? '没有找到匹配的收藏' : '还没有收藏' }}</h3>
                    <p>{{ searchQuery || filterCategory ? '尝试调整搜索条件' : '点击上方的"添加收藏"按钮来添加您的第一个收藏' }}</p>
                </div>
            </div>
        </main>
    </div>

    <!-- 欢迎弹窗 -->
    <div v-if="showWelcomeModal" class="modal-overlay" @click="closeWelcomeModal">
        <div class="welcome-modal" @click.stop>
            <div class="welcome-content">
                <div class="welcome-icon">🎉</div>
                <h3>欢迎回来！</h3>
                <p>{{ user.username }}，很高兴再次见到您！</p>
                <div class="welcome-stats">
                    <div class="stat-item">
                        <i class="fas fa-folder"></i>
                        <span>{{ totalCategoriesCount }} 个分类</span>
                    </div>
                    <div class="stat-item">
                        <i class="fas fa-bookmark"></i>
                        <span>{{ bookmarks.length }} 个收藏</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 编辑个人信息模态框 -->
    <div v-if="showEditProfileModal" class="modal-overlay" @click="closeEditProfileModal">
        <div class="modal" @click.stop>
            <div class="modal-header">
                <h3>✏️ 编辑个人信息</h3>
                <button @click="closeEditProfileModal" class="close-btn">×</button>
            </div>
            <form @submit.prevent="handleEditProfile" class="modal-form">
                <div class="form-group">
                    <label for="editUsername">
                        <i class="fas fa-user"></i>
                        用户名（留空则不修改）
                    </label>
                    <input
                            type="text"
                            id="editUsername"
                            v-model="editProfileForm.username"
                            placeholder="请输入新用户名"
                    >
                </div>

                <div class="form-group">
                    <label for="editEmail">
                        <i class="fas fa-envelope"></i>
                        邮箱（留空则不修改）
                    </label>
                    <input
                            type="email"
                            id="editEmail"
                            v-model="editProfileForm.email"
                            placeholder="请输入新邮箱地址"
                    >
                </div>

                <div class="form-group">
                    <label for="editPassword">
                        <i class="fas fa-lock"></i>
                        新密码（留空则不修改）
                    </label>
                    <input
                            type="password"
                            id="editPassword"
                            v-model="editProfileForm.password"
                            placeholder="请输入新密码"
                    >
                </div>

                <div class="modal-actions">
                    <button type="button" @click="closeEditProfileModal" class="btn btn-secondary">
                        取消
                    </button>
                    <button type="submit" class="btn btn-primary" :disabled="isLoading">
                        <i v-if="isLoading" class="fas fa-spinner fa-spin"></i>
                        <span v-else>保存修改</span>
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- 编辑分类模态框 -->
    <div v-if="showEditCategoryModal" class="modal-overlay" @click="closeEditCategoryModal">
        <div class="modal" @click.stop>
            <div class="modal-header">
                <h3>✏️ 编辑分类</h3>
                <button @click="closeEditCategoryModal" class="close-btn">×</button>
            </div>
            <form @submit.prevent="handleEditCategory" class="modal-form">
                <div class="form-group">
                    <label for="editCategoryName">
                        <i class="fas fa-folder"></i>
                        分类名称
                    </label>
                    <input
                            type="text"
                            id="editCategoryName"
                            v-model="editCategoryForm.name"
                            placeholder="请输入分类名称"
                            required
                    >
                </div>

                <div class="form-group">
                    <label for="editParentCategory">
                        <i class="fas fa-sitemap"></i>
                        父分类
                    </label>
                    <tree-select
                            v-model="editCategoryForm.parent_id"
                            :options="getAvailableParentCategories(editCategoryForm.id)"
                            placeholder="选择父分类（留空为顶级分类）"
                            :clearable="true"
                    ></tree-select>
                </div>

                <div class="form-group">
                    <label for="editCategoryDescription">
                        <i class="fas fa-align-left"></i>
                        描述（可选）
                    </label>
                    <textarea
                            id="editCategoryDescription"
                            v-model="editCategoryForm.description"
                            placeholder="请输入分类描述"
                            rows="3"
                    ></textarea>
                </div>

                <div class="modal-actions">
                    <button type="button" @click="closeEditCategoryModal" class="btn btn-secondary">
                        取消
                    </button>
                    <button type="submit" class="btn btn-primary" :disabled="isLoading">
                        <i v-if="isLoading" class="fas fa-spinner fa-spin"></i>
                        <span v-else>保存修改</span>
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- 创建分类模态框 -->
    <div v-if="showCreateCategoryModal" class="modal-overlay" @click="closeCreateCategoryModal">
        <div class="modal" @click.stop>
            <div class="modal-header">
                <h3>📁 创建分类</h3>
                <button @click="closeCreateCategoryModal" class="close-btn">×</button>
            </div>
            <form @submit.prevent="handleCreateCategory" class="modal-form">
                <div class="form-group">
                    <label for="categoryName">
                        <i class="fas fa-folder"></i>
                        分类名称
                    </label>
                    <input
                            type="text"
                            id="categoryName"
                            v-model="categoryForm.name"
                            placeholder="请输入分类名称"
                            required
                    >
                </div>

                <div class="form-group">
                    <label for="parentCategory">
                        <i class="fas fa-sitemap"></i>
                        父分类
                    </label>
                    <tree-select
                            v-model="categoryForm.parent_id"
                            :options="categoryTree"
                            placeholder="选择父分类（留空为顶级分类）"
                            :clearable="true"
                    ></tree-select>
                </div>

                <div class="form-group">
                    <label for="categoryDescription">
                        <i class="fas fa-align-left"></i>
                        描述（可选）
                    </label>
                    <textarea
                            id="categoryDescription"
                            v-model="categoryForm.description"
                            placeholder="请输入分类描述"
                            rows="3"
                    ></textarea>
                </div>

                <div class="modal-actions">
                    <button type="button" @click="closeCreateCategoryModal" class="btn btn-secondary">
                        取消
                    </button>
                    <button type="submit" class="btn btn-primary" :disabled="isLoading">
                        <i v-if="isLoading" class="fas fa-spinner fa-spin"></i>
                        <span v-else>创建分类</span>
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- 编辑收藏模态框 -->
    <div v-if="showEditBookmarkModal" class="modal-overlay" @click="closeEditBookmarkModal">
        <div class="modal" @click.stop>
            <div class="modal-header">
                <h3>✏️ 编辑收藏</h3>
                <button @click="closeEditBookmarkModal" class="close-btn">×</button>
            </div>
            <form @submit.prevent="handleEditBookmark" class="modal-form">
                <div class="form-group">
                    <label for="editBookmarkUrl">
                        <i class="fas fa-link"></i>
                        网址URL
                    </label>
                    <input
                            type="url"
                            id="editBookmarkUrl"
                            v-model="editBookmarkForm.url"
                            placeholder="请输入网址，如：https://example.com"
                            required
                            @blur="handleEditUrlPreview"
                    >
                    <button type="button" @click="handleEditUrlPreview" class="preview-btn">
                        <i class="fas fa-eye"></i> 获取预览
                    </button>
                </div>

                <div class="form-group">
                    <label for="editBookmarkTitle">
                        <i class="fas fa-heading"></i>
                        标题
                    </label>
                    <input
                            type="text"
                            id="editBookmarkTitle"
                            v-model="editBookmarkForm.title"
                            placeholder="请输入标题"
                            required
                    >
                </div>

                <div class="form-group">
                    <label for="editBookmarkDescription">
                        <i class="fas fa-align-left"></i>
                        描述（可选）
                    </label>
                    <textarea
                            id="editBookmarkDescription"
                            v-model="editBookmarkForm.description"
                            placeholder="请输入描述"
                            rows="3"
                    ></textarea>
                </div>

                <div class="form-group">
                    <label for="editBookmarkCategory">
                        <i class="fas fa-folder"></i>
                        分类
                    </label>
                    <tree-select
                            v-model="editBookmarkForm.category_id"
                            :options="categoryTree"
                            placeholder="选择分类（留空为无分类）"
                            :clearable="true"
                    ></tree-select>
                </div>

                <div class="modal-actions">
                    <button type="button" @click="closeEditBookmarkModal" class="btn btn-secondary">
                        取消
                    </button>
                    <button type="submit" class="btn btn-primary" :disabled="isLoading">
                        <i v-if="isLoading" class="fas fa-spinner fa-spin"></i>
                        <span v-else>保存修改</span>
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- 创建收藏模态框 -->
    <div v-if="showCreateBookmarkModal" class="modal-overlay" @click="closeCreateBookmarkModal">
        <div class="modal" @click.stop>
            <div class="modal-header">
                <h3>⭐ 添加收藏</h3>
                <button @click="closeCreateBookmarkModal" class="close-btn">×</button>
            </div>
            <form @submit.prevent="handleCreateBookmark" class="modal-form">
                <div class="form-group">
                    <label for="bookmarkUrl">
                        <i class="fas fa-link"></i>
                        网址URL
                    </label>
                    <input
                            type="url"
                            id="bookmarkUrl"
                            v-model="bookmarkForm.url"
                            placeholder="请输入网址，如：https://example.com"
                            required
                            @blur="handleUrlPreview"
                    >
                    <button type="button" @click="handleUrlPreview" class="preview-btn">
                        <i class="fas fa-eye"></i> 获取预览
                    </button>
                </div>

                <div class="form-group">
                    <label for="bookmarkTitle">
                        <i class="fas fa-heading"></i>
                        标题
                    </label>
                    <input
                            type="text"
                            id="bookmarkTitle"
                            v-model="bookmarkForm.title"
                            placeholder="请输入标题"
                            required
                    >
                </div>

                <div class="form-group">
                    <label for="bookmarkDescription">
                        <i class="fas fa-align-left"></i>
                        描述（可选）
                    </label>
                    <textarea
                            id="bookmarkDescription"
                            v-model="bookmarkForm.description"
                            placeholder="请输入描述"
                            rows="3"
                    ></textarea>
                </div>

                <div class="form-group">
                    <label for="bookmarkCategory">
                        <i class="fas fa-folder"></i>
                        分类
                    </label>
                    <tree-select
                            v-model="bookmarkForm.category_id"
                            :options="categoryTree"
                            placeholder="选择分类（留空为无分类）"
                            :clearable="true"
                    ></tree-select>
                </div>

                <div class="modal-actions">
                    <button type="button" @click="closeCreateBookmarkModal" class="btn btn-secondary">
                        取消
                    </button>
                    <button type="submit" class="btn btn-primary" :disabled="isLoading">
                        <i v-if="isLoading" class="fas fa-spinner fa-spin"></i>
                        <span v-else>添加收藏</span>
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- 批量移动收藏模态框 -->
    <div v-if="showBatchMoveModal" class="modal-overlay" @click="closeBatchMoveModal">
        <div class="modal" @click.stop>
            <div class="modal-header">
                <h3>📁 批量移动收藏</h3>
                <button @click="closeBatchMoveModal" class="close-btn">×</button>
            </div>
            <form @submit.prevent="handleBatchMove" class="modal-form">
                <div class="form-group">
                    <label>
                        <i class="fas fa-info-circle"></i>
                        将选中的 {{ selectedBookmarks.length }} 个收藏移动到：
                    </label>
                </div>

                <div class="form-group">
                    <label for="batchMoveCategory">
                        <i class="fas fa-folder"></i>
                        目标分类
                    </label>
                    <tree-select
                            v-model="batchMoveForm.target_category_id"
                            :options="categoryTree"
                            placeholder="选择目标分类（留空为移动到未分类）"
                            :clearable="true"
                    ></tree-select>
                </div>

                <div class="modal-actions">
                    <button type="button" @click="closeBatchMoveModal" class="btn btn-secondary">
                        取消
                    </button>
                    <button type="submit" class="btn btn-primary" :disabled="isLoading">
                        <i v-if="isLoading" class="fas fa-spinner fa-spin"></i>
                        <span v-else>移动收藏</span>
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- 消息提示 -->
    <div v-if="message.show" :class="['message-toast', message.type]">
        <i :class="getMessageIcon(message.type)"></i>
        <span>{{ message.text }}</span>
    </div>
</div>

<!-- 首页分类节点组件模板 -->
<script type="text/x-template" id="home-category-node-template">
    <div class="home-category-item">
        <!-- 主分类卡片 -->
        <div class="category-card" @click="$emit('view-category', category)">
            <div class="category-header">
                <i class="fas fa-folder"></i>
                <h4>{{ category.name }}</h4>
                <span v-if="category.children && category.children.length > 0" class="subcategory-badge">
                        +{{ category.children.length }}
                    </span>
            </div>
            <div class="category-bookmarks">
                <div
                        v-for="bookmark in getCategoryBookmarksAsync(category.id).slice(0, 3)"
                        :key="bookmark.id"
                        class="bookmark-preview"
                        @click.stop="$emit('visit-bookmark', bookmark)"
                >
                    <i class="fas fa-link"></i>
                    <span>{{ bookmark.title }}</span>
                </div>
                <div v-if="getCategoryBookmarksAsync(category.id).length > 3" class="more-bookmarks">
                    +{{ getCategoryBookmarksAsync(category.id).length - 3 }} 更多
                </div>
            </div>
        </div>

        <!-- 子分类卡片 -->
        <div v-if="category.children && category.children.length > 0" class="subcategories-grid">
            <home-category-node
                    v-for="child in category.children"
                    :key="child.id"
                    :category="child"
                    :bookmarks="bookmarks"
                    @view-category="$emit('view-category', $event)"
                    @visit-bookmark="$emit('visit-bookmark', $event)"
            ></home-category-node>
        </div>
    </div>
</script>

<!-- 树形选择组件模板 -->
<script type="text/x-template" id="tree-select-template">
    <div class="tree-select" :class="{ 'is-open': isOpen }" @click.stop>
        <div class="tree-select-trigger" @click="toggleDropdown">
            <span class="tree-select-value">{{ displayValue || placeholder }}</span>
            <i class="fas fa-chevron-down tree-select-arrow" :class="{ 'is-open': isOpen }"></i>
            <button v-if="clearable && modelValue" @click.stop="clearValue" class="tree-select-clear" type="button">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div v-if="isOpen" class="tree-select-dropdown" @click.stop>
            <div class="tree-select-options">
                <tree-select-option
                        v-for="option in options"
                        :key="option.id"
                        :option="option"
                        :selected-value="modelValue"
                        :level="0"
                        :expanded-options="expandedOptions"
                        @select="selectOption"
                        @toggle="toggleOption"
                ></tree-select-option>
            </div>
        </div>
    </div>
</script>

<!-- 树形选择选项组件模板 -->
<script type="text/x-template" id="tree-select-option-template">
    <div class="tree-select-option-group" @click.stop>
        <div
                class="tree-select-option"
                :class="{
                    'is-selected': option.id === selectedValue,
                    'has-children': option.children && option.children.length > 0,
                    'is-expanded': isExpanded
                }"
        >
            <span class="option-indent" :style="{ width: (level * 20) + 'px' }"></span>

            <!-- 折叠/展开按钮 -->
            <button
                    v-if="option.children && option.children.length > 0"
                    @click.stop="toggleExpanded"
                    class="option-toggle"
                    type="button"
            >
                <i :class="isExpanded ? 'fas fa-chevron-down' : 'fas fa-chevron-right'"></i>
            </button>
            <span v-else class="option-toggle-placeholder"></span>

            <!-- 分类图标 -->
            <i :class="option.children && option.children.length > 0 ? 'fas fa-folder' : 'fas fa-folder-open'"
               class="option-icon"></i>

            <!-- 分类名称（点击选择） -->
            <span class="option-text" @click.stop="$emit('select', option.id)">{{ option.name }}</span>

            <!-- 层级标识 -->
            <span class="option-level">Level {{ option.level || 1 }}</span>

            <!-- 子分类数量 -->
            <span v-if="option.children && option.children.length > 0" class="option-children-count">
                    ({{ option.children.length }})
                </span>
        </div>

        <!-- 子选项（可折叠） -->
        <div
                v-if="option.children && option.children.length > 0 && isExpanded"
                class="tree-select-children"
        >
            <tree-select-option
                    v-for="child in option.children"
                    :key="child.id"
                    :option="child"
                    :selected-value="selectedValue"
                    :level="level + 1"
                    :expanded-options="expandedOptions"
                    @select="(value) => $emit('select', value)"
                    @toggle="(id) => $emit('toggle', id)"
            ></tree-select-option>
        </div>
    </div>
</script>

<!-- 分类管理递归节点组件模板 -->
<script type="text/x-template" id="category-management-node-template">
    <div class="category-tree-item sub-level" :class="'level-' + level" v-show="showExpanded">
        <!-- 分类节点 -->
        <div class="category-item"
             :class="[
                     level === 1 ? 'sub-category' : level === 2 ? 'sub-sub-category' : 'deep-category',
                     { 'has-children': category.children && category.children.length > 0, 'expanded': expandedCategories.includes(category.id) }
                 ]"
             @click="$emit('handle-category-click', category)">
            <div class="category-item-header">
                <div class="category-item-main">
                    <!-- 横向连接线，仅非顶级分类显示 -->
                    <div v-if="level > 1" :class="['category-connector', level === 2 ? 'small' : level > 2 ? 'tiny' : '']"></div>
                    <div class="category-toggle-icon" v-if="category.children && category.children.length > 0">
                        <i :class="expandedCategories.includes(category.id) ? 'fas fa-chevron-down' : 'fas fa-chevron-right'"></i>
                    </div>
                    <div class="category-icon-wrapper">
                        <i :class="category.children && category.children.length > 0 ? 'fas fa-folder' : 'fas fa-folder-open'" class="category-icon"></i>
                    </div>
                    <div class="category-info">
                        <component :is="getTitleTag(level)" class="category-name">{{ category.name }}</component>
                        <span class="category-path" v-if="category.path">{{ category.path }}</span>
                        <div class="category-stats">
                            <span class="stat-item">📊 {{ getBookmarkCount(category.id) }}</span>
                            <span class="stat-item" v-if="category.children && category.children.length > 0">📁 {{ category.children.length }}</span>
                            <span class="stat-item">📅 {{ formatCategoryDate(category.created_at) }}</span>
                        </div>
                    </div>
                </div>
                <div class="category-item-actions" @click.stop>
                    <button @click="$emit('edit-category', category)" class="action-btn edit-btn" title="编辑分类">
                        <i class="fas fa-edit"></i>
                    </button>
                    <button @click.stop="$emit('delete-category', category.id)" class="action-btn delete-btn" title="删除分类">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
            </div>
        </div>



        <!-- 子分类容器，带纵向tree-line -->
        <div v-if="category.children && category.children.length > 0 && expandedCategories.includes(category.id)" style="position:relative;">
            <div class="tree-line"></div>
            <div>
                <category-management-node
                        v-for="child in category.children"
                        :key="child.id"
                        :category="child"
                        :level="level + 1"
                        :expanded-categories="expandedCategories"
                        :show-expanded="expandedCategories.includes(category.id)"
                        @handle-category-click="$emit('handle-category-click', $event)"
                        @edit-category="$emit('edit-category', $event)"
                        @delete-category="$emit('delete-category', $event)"
                        @get-category-bookmark-count="$emit('get-category-bookmark-count', $event)"
                        @format-date="$emit('format-date', $event)"
                        @toggle-category-bookmarks="$emit('toggle-category-bookmarks', $event)">
                </category-management-node>
            </div>
        </div>
    </div>
</script>

<!-- JavaScript -->
<script src="/web/js/api.js"></script>
<script src="/web/js/app.js"></script>
</body>
</html>
